<template>
  <div class="pager-container">
    <div class="pager-container-inner">
      <!--表单查询区域-->
      <bs-form class="query-form" form-type="query" :model="queryForm">
        <bs-form-item class="query-form-item">
          <el-radio-group size="default" v-model="searchType">
            <div>
              <el-radio value="1">服务器侧查询</el-radio>
            </div>
            <div>
              <el-radio value="2">设备侧查询</el-radio>
            </div>
          </el-radio-group>
          <div>
            <el-checkbox size="default" v-model="last">最近一次</el-checkbox>
          </div>
        </bs-form-item>
        <bs-form-item label="服务器IP">
          <bs-input placeholder="请输入服务器IP" :disabled="computedDisableServer" v-model="queryForm.server_ip_address"></bs-input>
        </bs-form-item>
        <bs-form-item label="MAC地址">
          <bs-input placeholder="请输入MAC地址" :disabled="computedDisableServer" v-model="queryForm.server_mac_address"></bs-input>
        </bs-form-item>
        <bs-form-item label="域账号">
          <bs-input placeholder="请输入域账号" :disabled="computedDisableServer" v-model="queryForm.server_admin"></bs-input>
        </bs-form-item>
        <bs-form-item label="日期">
          <el-date-picker placeholder="请选择日期" value-format="YYYY-MM-DD" :disabled="last" v-model="queryForm.log_time"></el-date-picker>
        </bs-form-item>
        <bs-form-item label="所属机房">
          <bs-select v-model="queryForm.idc" :disabled="computedDisableDevice"></bs-select>
        </bs-form-item>
        <bs-form-item label="设备">
          <bs-select v-model="queryForm.device" :disabled="computedDisableDevice"></bs-select>
        </bs-form-item>
        <bs-form-item label="接口">
          <bs-select v-model="queryForm.interface" :disabled="computedDisableDevice"></bs-select>
        </bs-form-item>
        <bs-form-item class="form-item-btns">
          <el-button type="primary" @click="handleSearch()">查询</el-button>
          <el-button @click="handleReset()">重置</el-button>
          <el-button type="primary" @click="handleExport()">导出</el-button>
        </bs-form-item>
      </bs-form>
      <div class="table-content">
        <bs-table ref="tableRef" :columns="columns" :data="tableData" :get-data="getList"></bs-table>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {delEmptyProp} from '@/utils'
import {reactive, ref, onMounted, computed} from 'vue'
import BsTable from '@/components/table/BsTable.vue'
import * as API from '@/service/modules/seek'

const tableRef = ref()
const searchType = ref('1')
const last = ref(true)
const queryForm = reactive<Record<string, any>>({
  /**服务器IP */
  server_ip_address: '',
  /**mac地址 */
  server_mac_address: '',
  /**域账号 */
  server_admin: '',
  /**日期 */
  log_time: '',
  /**所属机房 */
  idc: '',
  /**设备 */
  device: '',
  /**接口 */
  interface: ''
})

const tableData = ref<any[]>([{}])

const columns:ColumnItem[] = [
  {
    label: '设备名称',
    prop: 'node_hostname',
    width: 150
  },
  {
    label: 'IDC',
    prop: 'idc_name',
    width: 100
  },
  {
    label: '序列号',
    prop: 'serial_num',
    width: 200
  },
  {
    label: '管理IP',
    prop: 'node_ip',
    width: 120
  },
  {
    label: '接口',
    prop: 'node_interface',
    width: 400
  },
  {
    label: '交换机位置',
    prop: 'node_location',
    minWidth: 120
  },
  {
    label: '服务器IP',
    prop: 'server_ip_address',
    width: 150,
  },
  {
    label: '服务器MAC地址',
    width: 150,
    prop: 'server_mac_address'
  },
  {
    label: '负责人',
    prop: 'server_admin',
    width: 120,
  },
  {
    label: '业务线',
    prop: 'server_platform',
    width: 120,
  },
  {
    label: '服务器位置',
    prop: 'server_location',
    width: 120
  },
  {
    label: '记录时间',
    prop: 'log_time',
    width: 150
  },
  {
    label: '操作',
    prop: 'action',
    fixed: 'right',
    width: 200,
    bodyOptions: {
      type: 'button',
      bind (_row, _index) {
        return {
          buttons: [{
            text: '流量',
            onClick: () => {
            }
          }, {
            text: '存活图',
            onClick: () => {
            }
          }, {
            text: 'SSH',
            onClick: () => {
            }
          }]
        }
      }
    }
  }
]
const computedDisableServer = computed(() => {
  return searchType.value !== '1'
})

const computedDisableDevice = computed(() => {
  return searchType.value !== '2'
})
/**
 * 获取表格数据
 */
const getList = async (tableParams:TableDataParam) => {
  const params = {
    start: tableParams.start,
    limit: tableParams.limit,
    last: last.value,
    ...delEmptyProp(queryForm)
  }
  try {
    const res:any = await API.getLocationAddrs(params)
    tableData.value = res.results || []
    return {
      total: res.count
    }
  } catch (e) {
    tableData.value = []
    return {
      total: 0
    }
  }
}

/**
 * 导出
 */
const handleExport = () => {

}

const handleReset = () => {
  for (let key in queryForm) {
    queryForm[key] = ''
  }
  handleSearch()
}

const handleSearch = () => {
  tableRef.value.queryData()
}

onMounted(() => {
  handleSearch()
})
</script>
<style lang="scss" scoped>
.query-form {
  :deep(.el-form-item) {
    height: 40px;
  }
  .query-form-item {
    height: auto;
    :deep(.el-form-item__content) {
      display: block;
    }
    :deep(.el-radio-group) {
      display: block;
    }
  }
}
</style>
